<template>
  <view class="modify-password-page">
    <!-- 顶部区域 -->
    <view class="header">
<!--      <view class="close-btn" @click="handleClose">×</view> -->
      <view class="title">
        <text class="main-title">修改密码</text>
        <text class="sub-title">一站式工业设计任务交易平台</text>
      </view>
      <image class="icon" src="/static/header-icon.png" mode="aspectFit"></image>
    </view>

    <!-- 表单区域 -->
    <form class="form">
      <!-- 手机号 -->
      <view class="form-item">
        <label class="label">手机号</label>
        <input 
          class="input" 
          type="number" 
          v-model="phone" 
          placeholder="请输入手机号"
          disabled
        />
      </view>
      <!-- 验证码 -->
      <view class="form-item">
        <label class="label">验证码</label>
        <view style="display: flex; align-items: center; margin-top:30rpx;">
          <input
            class="input" 
            type="text" 
            v-model="code" 
            style="margin: 0;"
            placeholder="请输入"
          />
          <button 
            class="send-code-btn" 
            :disabled="isSending" 
            @click="handleSendCode"
          >
            {{ sendCodeText }}
          </button>
        </view>
      </view>
      <!-- 设置新密码 -->
      <view class="form-item">
        <label class="label">设置新密码</label>
        <input 
          class="input" 
          type="password" 
          v-model="newPassword" 
          placeholder="6-8位大小写字母与数字组合"
        />
        <view 
          class="eye-icon" 
          @click="toggleNewPasswordVisibility"
        >
          <image 
            :src="newPasswordIsVisible? '/static/eye-open.png' : '/static/eye-close.png'" 
            mode="aspectFit" 
          />
        </view>
      </view>
      <!-- 二次确认密码 -->
      <view class="form-item">
        <label class="label">二次确认密码</label>
        <input 
          class="input" 
          type="password" 
          v-model="confirmPassword" 
          placeholder="6-8位大小写字母与数字组合"
        />
        <view 
          class="eye-icon" 
          @click="toggleConfirmPasswordVisibility"
        >
          <image 
            :src="confirmPasswordIsVisible? '/static/eye-open.png' : '/static/eye-close.png'" 
            mode="aspectFit" 
          />
        </view>
      </view>
    </form>

    <!-- 确认按钮 -->
    <button class="confirm-btn" @click="handleConfirm">确认</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 表单数据
const phone = ref('18788888888');
const code = ref('');
const newPassword = ref('');
const confirmPassword = ref('');

// 验证码发送状态
const isSending = ref(false);
const sendCodeText = ref('发送验证码');
let countdown = 60;

// 密码可见性
const newPasswordIsVisible = ref(false);
const confirmPasswordIsVisible = ref(false);

// 关闭页面
const handleClose = () => {
  uni.navigateBack();
};

// 发送验证码
const handleSendCode = () => {
  if (!/^1[3-9]\d{9}$/.test(phone.value)) {
    showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    });
    return;
  }

  isSending.value = true;
  const timer = setInterval(() => {
    countdown--;
    sendCodeText.value = `${countdown}s后重发`;
    if (countdown === 0) {
      clearInterval(timer);
      isSending.value = false;
      sendCodeText.value = '发送验证码';
      countdown = 60;
    }
  }, 1000);
};

// 切换新密码可见性
const toggleNewPasswordVisibility = () => {
  newPasswordIsVisible.value =!newPasswordIsVisible.value;
};

// 切换确认密码可见性
const toggleConfirmPasswordVisibility = () => {
  confirmPasswordIsVisible.value =!confirmPasswordIsVisible.value;
};

// 确认修改密码
const handleConfirm = () => {
  if (!code.value) {
    showToast({
      title: '请输入验证码',
      icon: 'none'
    });
    return;
  }

  if (newPassword.value.length < 6 || newPassword.value.length > 8) {
    showToast({
      title: '新密码长度需为6 - 8位',
      icon: 'none'
    });
    return;
  }

  if (newPassword.value!== confirmPassword.value) {
    showToast({
      title: '两次输入的密码不一致',
      icon: 'none'
    });
    return;
  }

  // 这里可以添加实际修改密码的接口调用逻辑
  showToast({
    title: '密码修改成功',
    icon:'success'
  });
  uni.navigateBack();
};
</script>

<style scoped>
.modify-password-page {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(to bottom, #e6f7ef, #ffffff);
  padding: 30rpx;
  padding-top: 176rpx;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50rpx;
}

.close-btn {
  font-size: 50rpx;
  color: #333;
}

.title {
  display: flex;
  flex-direction: column;
}

.main-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.sub-title {
  font-size: 28rpx;
  color: #03BB8D;
}

.icon {
  width: 160rpx;
  height: 160rpx;
}

.form {
  width: 100%;
}

.form-item {
  /* display: flex; */
  align-items: center;
  margin-bottom: 30rpx;
}

.label {
  width: 120rpx;
  font-size: 32rpx;
  color: #666;
}

.input {
  flex: 1;
  height: 80rpx;
  padding: 0 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  font-size: 32rpx;
  border: 1px solid #eee;
  margin-top: 30rpx;
}

.send-code-btn {
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  margin-left: 30rpx;
  background-color: #00bfa5;
  color: #fff;
  font-size: 32rpx;
  border-radius: 10rpx;
}

.send-code-btn:disabled {
  background-color: #a5d6c8;
  opacity: 0.8;
}

.eye-icon {
  width: 40rpx;
  height: 40rpx;
  margin-left: 20rpx;
  cursor: pointer;
}

.confirm-btn {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #00bfa5;
  color: #fff;
  font-size: 36rpx;
  border-radius: 50rpx;
  margin-top: 80rpx;
}
</style>